<template>
	<view>
		<uni-popup ref="sendCodeRef" :maskClick="false" :maskBackgroundColor="'rgba(0, 0, 0, 0.6)'">
			<view class="code-form-main">
				<uni-forms ref="baseForm" :modelValue="sendCodeForm">
					<uni-forms-item>
						<uni-easyinput :inputBorder="false" disabled v-model="sendCodeForm.account"
							placeholder="请输入手机号" />
					</uni-forms-item>
					<uni-forms-item>
						<view class="code-item">
							<uni-easyinput type="number" trim="all" placeholder="请输入验证码"
								:inputBorder="false" maxlength="6" v-model="sendCodeForm.code" />
							<button @click="sendCode" type="default" :loading="sendCodeTextDisabled"
								:disabled="sendCodeTextDisabled"
								:style="{ backgroundColor: sendBtnDisabled ? '#DCDCDC' : '#276FF7',fontSize:sendCodeTextDisabled ? '22rpx' : '30rpx' }" class="send-code"
								style="margin-left: 20rpx;">{{ codeBtnName }}</button>
						</view>
					</uni-forms-item>
				</uni-forms>
				<view class="footer-btn-box" style="width: 100%;">
					<button @click="closeSendForm" class="cancle-btn">取消</button>
					<button :loading="subLoading" :disabled="subLoading" @click="sendCodeFormSubmit" type="primary"
						class="confirm-btn">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import {
	getReturnSendSms,
	getReturnLoginSms,
} from "@/api/user";
export default {
	// #ifdef MP-WEIXIN
	options: {
		styleIsolation: 'shared' // 解除样式隔离
	},
	// #endif
	data() {
		return {
			sendCodeForm: { //验证码输入完成后提交对象
				account: '',
				code: '',
			},
			sendBtnDisabled: false,
			sendCodeTextDisabled: false,
			codeTime: 60,
			codeTimer: null,
			codeForm: { // 发送验证码对象
				province: '',
				creditCode: '',
				uuid: '',
				account: ''
			},
			subLoading: false,
			detailInfo: {}
		}
	},
	computed: {
		codeBtnName() {
			if (this.codeTime == 60) {
				return '发送验证码'
			} else if (1 < this.codeTime < 60) {
				return `${this.codeTime}s后重发`
			} else if (this.codeTime == 1) {
				// return 
				this.codeTime = 10
				return '发送验证码'
			}

		}
	},
	methods: {
		open(sendCodeForm, codeForm, detailInfo) {
			this.sendCodeForm = Object.assign({}, sendCodeForm, { code: '' })
			this.codeForm = codeForm
			this.detailInfo = detailInfo
			this.$refs.sendCodeRef.open()
		},
		closeSendForm() {
			this.codeForm = {
				province: '',
				creditCode: '',
				uuid: '',
				account: ''
			}
			this.sendCodeForm = {
				account: '',
				code: ''
			}
			this.codeTimer = null
			this.codeTime = 60
			this.subLoading = false
			this.sendCodeTextDisabled = false;
			this.sendBtnDisabled = false
			this.$refs.sendCodeRef.close()
			let paramsPageClick = {
				Um_Key_ButtonName: '重新查询-弹框取消',
				Um_Key_SourcePage: `报告详情-${this.detailInfo.shareCode}`,
			}
			this.$umaTrack.pageClickTrack(paramsPageClick)
		},
		sendCodeFormSubmit() {
			if (this.sendCodeForm.code == '') return this.$util.Tips('请输入验证码')
			this.subLoading = true
			let params = {
				taskId: this.detailInfo.taskId,
				creditCode: this.detailInfo.creditCode,
				uuid: this.codeForm.uuid,
				code: this.sendCodeForm.code,
				account: this.sendCodeForm.account
			}
			getReturnLoginSms(params).then(res => {
				this.$refs.sendCodeRef.close()
				this.$util.Tips({
					title: res.message
				}, () => {
					uni.switchTab({
						url: '/pages/reportList/index'
					})
				})
			}).finally(() => {
				this.subLoading = false
			})
			let paramsPageClick = {
				Um_Key_ButtonName: '重新查询-弹框确认',
				Um_Key_SourcePage: `报告详情-${this.detailInfo.shareCode}`,
			}
			this.$umaTrack.pageClickTrack(paramsPageClick)
			console.log(this.sendCodeForm)
		},
		sendCode() {
			if (!this.sendCodeForm.account) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
				return
			}

			if (this.sendBtnDisabled) {
				return
			}
			if (this.sendCodeForm.account) {
				this.sendCodeTextDisabled = true;
				getReturnSendSms(this.codeForm).then(res => {
					if (res.data) {
						this.$util.Tips({
							title: '发送验证码成功'
						})
						this.getCodeHandle()
					}

				}).finally((v) => {
					this.sendCodeTextDisabled = false;
				})
			}
			let paramsPageClick = {
				Um_Key_ButtonName: '重新查询-发送验证码',
				Um_Key_SourcePage: `报告详情-${this.detailInfo.shareCode}`,
			}
			this.$umaTrack.pageClickTrack(paramsPageClick)
		},
		getCodeHandle(val) {
			this.sendBtnDisabled = true
			this.codeTimer = setInterval(() => {
				if (this.codeTime == 1) {
					clearInterval(this.codeTimer)
					this.sendBtnDisabled = false
					this.codeTime = 60
				} else {
					this.codeTime--
				}
			}, 1000)
		},
	}
}
</script>

<style lang="scss" scoped>
.code-form-main {
	width: 560rpx;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 60rpx 30rpx;

	/deep/ .uni-easyinput__content-input {
		height: 84rpx;
	}

	/deep/ .is-disabled {
		background-color: #F5F5F5 !important;
		color: #000 !important;
		border: none !important;
	}

	/deep/ .uni-easyinput__content {
		background-color: #F5F5F5 !important;
		color: #000 !important;
		border: none !important;
		border-radius: 20rpx !important;
	}
	/deep/ .uni-forms-item {
        margin-bottom: 30rpx !important;
    }
	//.is-input-border
	.code-item {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.send-code {
			width: 200rpx;
			height: 70rpx;
			line-height: 70rpx;
			color: #fff;
			font-size: 30rpx;
			font-weight: bold;
		}


	}

	.footer-btn-box {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.cancle-btn {
			width: 225rpx;
			height: 84rpx;
			background: #F6F9F8;
			border-radius: 6rpx;
			overflow: hidden;
			font-weight: 500;
			font-size: 32rpx;
			color: #999999;
			margin-right: 26rpx;
		}

		.confirm-btn {
			margin-left: 26rpx;
			width: 225rpx;
			height: 84rpx;
			background: #276FF7;
			border-radius: 6rpx;
		}
	}


}
</style>